<template>
	<div class="container">
		<!-- 顶部提示语 -->
		<div class="header">
			<p class="tip-text">您今天的陪伴对孩子意义重大</p>
		</div>

		<!-- 功能按钮区域 -->
		<div class="button-group">
			<div class="function-button" @click="navigateToVideo">
				<span class="button-text">安抚技巧视频</span>
				<span class="button-arrow">➔</span>
			</div>

			<div class="function-button" @click="initiateCall">
				<span class="button-text">一键连线</span>
				<span class="button-arrow">➔</span>
			</div>

			<div class="function-button" @click="showNavigation">
				<span class="button-text">附近机构导航</span>
				<span class="button-arrow">➔</span>
			</div>
		</div>
	</div>
</template>

<script setup>
	// 跳转视频页面
	const navigateToVideo = () => {
		// 实际可替换为路由跳转逻辑
		console.log('跳转安抚技巧视频页面');
		// uni.navigateTo({ url: '/pages/video/index' })
	};

	// 发起通话
	const initiateCall = () => {
		console.log('触发一键通话');
		// 实际可调用电话接口
		// uni.makePhoneCall({ phoneNumber: '紧急联系电话' })
	};

	// 显示机构导航
	const showNavigation = () => {
		console.log('打开附近机构导航');
		// 实际可调用地图接口
		// uni.openLocation({ latitude: 0, longitude: 0 })
	};
</script>

<style scoped>
	/* 容器样式 */
	.container {
		padding: 20px;
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 头部提示语 */
	.header {
		text-align: center;
		margin: 30px 0;
	}

	.tip-text {
		font-size: 18px;
		color: #333;
		font-weight: 500;
	}

	/* 功能按钮样式 */
	.button-group {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.function-button {
		background: #00b9ff;
		border-radius: 12px;
		padding: 50px 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
		transition: transform 0.2s;
	}

	.function-button:active {
		transform: scale(0.98);
	}

	.button-text {
		font-weight: bold;
		font-size: 20px;
		color: white;
		margin: auto;
	}

	.button-arrow {
		font-size: 20px;
		color: #666;
	}

	/* 移动端适配 */
	@media (min-width: 768px) {
		.container {
			max-width: 500px;
			margin: 0 auto;
		}
	}
</style>